<template>
    <main>
        <!-- <div>{{hname}}</div> -->
        <slot name="zzq"></slot>
        <div v-for="(item,index) in list">
            <div class='title'>{{item.title}}</div>
            <ul class="ul1">
                <li v-for="(item,index) in item.con">
                    <router-link :to="'/details/'+item.uid">
                        <div>
                            <img :src="item.src" alt="" class="pro">
                        </div>
                        <div>
                            <span>{{item.name}}</span>
                        </div>
                    </router-link> 
                </li>
            </ul>
            <div class="line"></div>
        </div>
    </main>
</template>
<script>
    export default {
        // props: ["hname"],
        data(){
            return {
                list:[]
            }
        },
        mounted(){
            this.$http.get('./data/details.json')
            .then((response)=> {
                console.log(response);
                this.list=response.data.list
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // always executed
            });
        }
    }
</script>
<style  scoped>
    main{
        height: calc(100vh - 15vw);
        overflow: auto;
    }
    main>div{
        position: relative;
    }
    .title{
        position: relative;
        padding: 6vw 8vw 0 8vw;
        font-size:3.5vw;
        font-weight: 600;
    }
    .ul1{
        position: relative;
        padding: 5vw 6vw 0 6vw;
    }
    .ul1>li{
        position: relative;
        width: 17vw;
        float: left;
        /* border: 1px solid red; */
        text-align: center;
    }
    .ul1>li:nth-of-type(3n-2){
        margin-right: 6vw;
    }
    .ul1>li:nth-of-type(3n-1){
        margin-right: 6vw;
    }
    .ul1>li div:nth-of-type(1){
        width:17vw;
        height:17vw;
    }
    .pro{
        max-width:17vw;
        max-height:17vw;
    }
    .ul1>li div:nth-of-type(2){
        padding: 2vw 0 6vw;
        height: 12vw;
    }
    .ul1>li div:nth-of-type(2)>span{
        font-size: 3vw;  
        line-height: 3vw;
    }
    .ul1::after{
        content: "";
        display: table;
        clear: both;
    }
    .line{
        width: 63vw;
        height: 1px;
        border-bottom: 1px solid #e6e6e6;
        display: inline-block;
        position: absolute;
        bottom: 0;
        left: 6vw;
    }
    .ul1>li div>span{
        color:black
    }
</style>